<!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>易购书城</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/icon/favicon.png">

    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/price_rangs.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
    <main class="login-bg">
        <!-- login Area Start -->
        <div class="login-form-area">
            <div class="login-form">
                <!-- Login Heading -->
                <div class="login-heading">
                    <span>登录</span>
                    <p style="color:red;">{{msg}}</p>
                </div>
                <!-- Single Input Fields -->
                <div class="input-box">
                    <div class="single-input-fields">
                        <label>账号/邮箱</label>
                        <input type="text" v-model="usernameoremail" placeholder="请输入账号或手机号">
                    </div>
                    <div class="single-input-fields">
                        <label>密码</label>
                        <input type="password" v-model="user.password" placeholder="请输入密码">
                    </div>
                    <div class="single-input-fields login-check">
                        <a href="#" class="f-right">找回密码?</a>
                    </div>
                </div>
                <!-- form Footer -->
                <div class="login-footer">
                    <p>还没有账号 点击此处? <a href="register.html">注册</a></p>
                    <button class="submit-btn3" @click="login">登录</button>
                </div>
            </div>
        </div>
        <!-- login Area End -->
    </main>
</div>
<!-- JS here -->
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>

<!-- Slick-slider , Owl-Carousel ,slick-nav -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<script src="./assets/js/jquery.slicknav.min.js"></script>

<!--wow , counter , waypoint, Nice-select -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.counterup.min.js"></script>
<script src="./assets/js/waypoints.min.js"></script>
<script src="./assets/js/price_rangs.js"></script>

<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>

<!--  Plugins, main-Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
</body>

<script>

    new Vue({
        el:"#app",
        data:{
            user:{
                password:"",username:"",email:""
            },
            usernameoremail:"",
            msg:""
        },
        methods:{
            login(){
                axios.post(`/login`,this.user).then(({data})=>{
                    if(data.code==200){
                        var url = location.search.substring(11);
                        if(url.trim()!="" || url ==null){
                            window.location.href = url
                            return
                        }
                        window.location="index.html"
                    }else{
                        this.msg="登录失败，账号或密码错误";
                    }
                }).catch(()=>{
                    this.msg="登录失败，账号或密码错误";
                })
            }
        },
        watch:{
            usernameoremail:function (val) {
                this.user.username = val
                this.user.email = val
            }
        }
    })
</script>
</html>